import React, { PureComponent } from 'react';
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { Select, Row, Col } from 'antd';
import colors from '../../../../css/colors';

const { Option } = Select;

const redColor = colors.debtAndProfit.text[0];

const arr = [0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95];
const controlValueList = arr.map((item) => {
  return { value: `${item}`, title: `${parseFloat(item * 100).toFixed(0)}%` };
});
const touchAlarmOperationList = [
  { value: '1', title: '警告' },
  { value: '2', title: '审批' },
  { value: '3', title: '禁止' },
];

class FormControl extends PureComponent {
  render() {
    const { onChange, value, disabled } = this.props;
    const handleAdd = () => {
      if (disabled) return;

      onChange([...value, { key: new Date().getTime(), controlValue: '', touchAlarmOperation: '' }]);
    };
    const handleOnChange = (e, key, type) => {
      onChange(
        value.map((it) => {
          if (it.key === key) {
            return { ...it, [type]: e };
          }
          return it;
        }),
      );
    };
    const handleDelete = (key) => {
      if (value.length < 2 || disabled) return;
      onChange(value.filter((it) => it.key !== key));
    };
    const iconClass = value.length > 1 ? (!disabled ? '' : 'minusDisabled') : 'minusDisabled';
    const iconClass1 = !disabled ? '' : 'minusDisabled';

    return (
      <>
        <div style={{ maxHeight: '117px', overflow: 'auto' }}>
          {value.map((item) => (
            <Row key={item.key} style={{ position: 'relative', marginBottom: 10 }}>
              <Col span={9} style={{ marginRight: '20px' }}>
                <Select style={{ width: '100%' }} value={item.controlValue} disabled={disabled} onChange={(e) => handleOnChange(e, item.key, 'controlValue')}>
                  {controlValueList.map((items) => (
                    <Option value={items.value} key={items.value}>
                      {items.title}
                    </Option>
                  ))}
                </Select>
              </Col>
              <Col span={9}>
                <Select style={{ width: '100%' }} value={item.touchAlarmOperation} disabled={disabled} onChange={(e) => handleOnChange(e, item.key, 'touchAlarmOperation')}>
                  {touchAlarmOperationList.map((items) => (
                    <Option value={items.value} key={items.value}>
                      {items.title}
                    </Option>
                  ))}
                </Select>
              </Col>
              <MinusCircleOutlined style={{ color: iconClass ? 'inherit' : redColor }} className={`colorMinus ${iconClass}`} onClick={() => handleDelete(item.key)} />
            </Row>
          ))}
        </div>
        <PlusCircleOutlined className={`colorPlus ${iconClass1}`} onClick={handleAdd} />
      </>
    );
  }
}
export default FormControl;
